<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getTeamList } from '@/api/user.js'
import { deleteTeamComUser, deleteReferee } from '@/api/admin.js';

const route = useRoute();
const router = useRouter();
const projectId = ref(route.query.projectId);
const userList = ref([]);
const collegeList = ref([]);
const classList = ref([]);
const refList = ref([]);
const groupedUsers = ref({}); // 存储分组后的用户数据

// 获取团队列表
const list = async () => {
  try {
    const resp = await getTeamList(projectId.value);
    if (Array.isArray(resp.data.userList)) {
      userList.value = resp.data.userList;
      collegeList.value = resp.data.collegeList;
      classList.value = resp.data.classList;
      refList.value = resp.data.refList
      ElMessage.success("获取名单成功");
    } else {
      ElMessage.error("获取名单失败，返回的数据格式不正确");
    }
  } catch (error) {
    ElMessage.error("获取数据失败");
  }
};

// 根据ID获取学院名称
const getCollegeName = (id) => {
  const college = collegeList.value.find(col => col.collegeId === id);
  return college ? college.name : '未知学院';
};

// 根据ID获取班级名称
const getClassName = (id) => {
  const cls = classList.value.find(c => c.classId === id);
  return cls ? cls.name : '未知班级';
};

// 移出团队成员
const removeTeamMember = async (item) => {
  try {
    await ElMessageBox.confirm('确认移出此成员？',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });
    await deleteTeamComUser(item.userId,projectId.value);
    // console.log(userId,projectId)
    ElMessage.success('移出成功')
    list();
  } catch (error){
    ElMessage.error('移出失败，请重试')
  }
}

//移出裁判
const removeReferee = async (item) => {
  try {
    await ElMessageBox.confirm('确认移出此裁判？',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });
    await deleteReferee(item.userId,projectId.value);
    // console.log(userId,projectId)
    ElMessage.success('移出成功')
    list();
  } catch (error){
    ElMessage.error('移出失败，请重试')
  }
}

// 定义方法来返回不同的颜色
function getColor(index) {
  const baseColors = ['#85ce61', '#ebb563', '#f78989', '#6b6d71'];
  const alpha = 0.8;
  const colors = baseColors.map(color => {
    const rgb = color.substring(1).match(/.{2}/g).map(hex => parseInt(hex, 16));
    return `rgba(${rgb.join(',')}, ${alpha})`;
  });
  return colors[index % colors.length];
}

onMounted(() => {
  list();
});
</script>

<template>
    <el-card class="page-container">
      <template #header>
        <div class="header">
          <span>参赛人员展示</span>
        </div>
      </template>
      <div class="container" style="min-height: 200px; display: flex; gap: 10px; flex-wrap: wrap;"> 
        <el-card 
          v-for="(item, index) in userList" 
          :key="index" 
          class="box" 
          :style="{ backgroundColor: getColor(index) }" 
          :body-style="{ padding: '10px' }"
        >
            <p>{{ item.tname }} 组</p>
          <h3>{{ item.username }}</h3>
          <p>学院: {{ getCollegeName(item.collegeId) }}</p>
          <p>班级: {{ getClassName(item.classId) }}</p>
          <el-button type="danger" @click="removeTeamMember(item)">移出成员</el-button>
        </el-card>
      </div>


      <div class="header" style="margin-top: 20px;">
      <span>裁判</span>
    </div>
    <div class="container" style="min-height: 200px; display: flex; gap: 10px; flex-wrap: wrap;">
      <el-card 
        v-for="(item, index) in refList" 
        :key="index" 
        class="box" 
        :style="{ backgroundColor: getColor(index) }" 
        :body-style="{ padding: '10px' }"
      >
        <h3>{{ item.username }}</h3>
        <p>学院: {{ getCollegeName(item.collegeId) }}</p>
        <p>班级: {{ getClassName(item.classId) }}</p>
        <el-button type="danger" @click="removeReferee(item)">移出裁判</el-button>
      </el-card>
    </div>

    </el-card>
  </template>
  

<style scoped lang="scss">
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 500px;
  perspective: 1000px;
}

.box {
  flex: 0 0 auto;
  width: 200px; /* 设置盒子的宽度 */
  aspect-ratio: auto; /* 自适应高度 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* 左对齐 */
  color: black;
  font-weight: bold;
  padding: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  font-size: 14px;
  display: flex; /* 使按钮与文本在同一行 */
  justify-content: space-between; /* 分散对齐 */
  width: 100%; /* 占满宽度 */
}
</style>
